<template>
  <div>
    <h2>Music</h2>
    <div>
      <button @click="$router.push('/music/item?name=周杰伦&id=1')">
        周杰伦
      </button>

      <button
        @click="
          $router.push({
            name: 'MusicItem',
            query: {
              name: '五月天',
              id: '2',
            },
          })
        "
      >
        五月天
      </button>

      <button
        @click="
          $router.push({
            path: '/music/item',
            query: {
              name: '小刚',
              id: '3',
            },
          })
        "
      >
        小刚
      </button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Music",
  mounted() {
    console.log("Music--mounted");
  },
  beforeDestroy() {
    console.log("Music--beforeDestroy");
  },
  activated() {
    console.log("Music---激活");
  },
  deactivated() {
    console.log("Music---失活");
  },
};
</script>

<style></style>
